<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/vue.js"></script>
</head>
<body>

    <!--1.一个容器-->
    <div id="app">
        <div v-show="showList">
            <h1>{{title}}</h1>
            <table>

            </table>
            <button onclick="addFun()">新增</button>
        </div>
        <div v-show="!showList">
            <h1>{{title}}</h1>
            <form>
                商品名称:<input type="text">
                商品名称:<input type="text">
                商品名称:<input type="text">
                <button onclick="">add</button>
            </form>

            <button onclick="showFun()">返回</button>
        </div>
    </div>

    <!--{{username}}-->

    <script>

        function addFun(){
            app.showList = false;
            app.title = "新增商品";
        }

        function showFun(){
            app.showList = true;
            app.title = "商品列表";
        }

       // var username = $("#username").val();
        //2.创建vue的实例
       // 页面展示：helloworld!!
       //练习：用一个页面实现： 默认显示商品列，如果点了新增按钮，则显示：一个新增商品的表单。

        var app = new Vue({
            el:"#app",//vue实现的挂载点  dom的id
            //vue中的数据定义
            //1） 用户录入  2） 服务端返回的  3）静态数据
            data:{

                showList:true,
                title:"商品列表"
            }

        });


    </script>

</body>
</html>